import * as React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons'
import EntIcon from 'react-native-vector-icons/Entypo'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import {NavigationContainer} from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { createStackNavigator } from '@react-navigation/stack'

import Home from '../pages/Home'
import Video from '../pages/Video'
import My from '../pages/My'
import Search from '../pages/Search'
import VideoInfo from '../pages/VideoInfo'

const Tab = createBottomTabNavigator()
const Stack = createStackNavigator()

const Tabs = () =>{
    return (
        <>
            <Tab.Navigator
                initialRouteName="Home"
                screenOptions={({route}) => ({
                    tabBarIcon: ({focused, color, size}) => {
                        if (route.name === 'Home') {
                            return (
                                <EntIcon
                                    name="home"
                                    size={size}
                                    color={color}
                                />
                            );
                        } else if (route.name === 'Video') {
                            return (
                                <MaterialIcons
                                    name="live-tv"
                                    size={size}
                                    color={color}
                                />
                            );
                        } else if (route.name === 'My') {
                            return (
                                <Ionicons
                                    name="person-outline"
                                    size={size}
                                    color={color}
                                />
                            );
                        }
                    },
                })}
                tabBarOptions={{
                    activeTintColor: 'tomato',
                    inactiveTintColor: 'gray',
                }}
            >
                <Tab.Screen key="Home" name="Home" component={Home} options={{title: '首页'}}/>
                <Tab.Screen key="Video" name="Video" component={Video} options={{title: '全部'}}/>
                <Tab.Screen key="My" name="My" component={My} options={{title: '我的'}}/>
            </Tab.Navigator>
        </>
    )
}

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator mode="card" initialRouteName="Home">
                <Stack.Screen
                    name="Home"
                    component={Tabs}
                    options={{ headerShown: false }}
                />
                <Stack.Screen
                    key="SearchHot"
                    name="SearchHot"
                    component={Search}
                    options={{ title: '搜索', headerShown: false }}
                />
                <Stack.Screen
                    key="VideoInfo"
                    name="VideoInfo"
                    component={VideoInfo}
                    options={{ title: '详情', headerShown: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}
